<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{
            background-color: azure;
        }
        .box-card{
            margin-top: 15%;
            margin-left: 20%;
            width: 60%;
            background-color: aquamarine;
            text-align: center;
        }
        .box-card input{
            height: 30px;
        }
        .box-card .el-button{
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        

        <router-view></router-view>
    </div>
    <script>
        var login = {
            data() {
                return {
                    loginData: {}
                }
            },
            template: `
            <div>
                <el-card class="box-card">
            <!-- <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
                
            </div> -->
            <div>
                <h1>登录页面</h1>
                用户登录：<input type="text" v-model="loginData.username"><br/>
                <!-- &nbsp; 代表一个字符-->
                <!-- &ensp;半个汉字 -->
                <!-- &emsp; 一个中文字符，两个字符 -->
                密&emsp;&emsp;码：<input type="password" v-model="loginData.password"><br/>
                <el-button type="primary" @click="loginHandler">登录</el-button>


            </div>
           
        </el-card>
            

           



        </div>
        `,
            methods: {
                loginHandler() {
                    //默认是表单，要转为json格式存储
                    axios.defaults.headers.post['Content-Type'] = 'application/json';
                    axios({
                        url: 'http://39.103.160.49:8888/user/login',
                        method: 'post',
                        data: JSON.stringify(this.loginData)
                    }).then(res => {
                        //用户身份令牌
                        sessionStorage.setItem('token', res.data.data.token)
                        // this.$message({
                        //     message: '恭喜你，这是一条成功消息',
                        //     type: 'success'
                        // });
                        this.$message.success('登录成功');
                        // 登录成功，跳转至首页
                        this.$router.push({
                            path: '/index'
                        })
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('账号或者密码错误，请检查一下');
                    })
                },
            }

        }
        var index = {
            template: `
            <div>
                欢迎登录
            </div>
            
            `

        }
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                },
                {
                    path: '/index',
                    component: index
                },
            ]
        })
        router.beforeEach((to, from, next) => {
            var token = sessionStorage.getItem('token');
            //当之前的路径不是login(to)且没有token
            if (to.path != '/login' && !token) {
                alert('请登录');
                //登录之后路径返回到login页面
                next('/login')
            }
            //如果有token,正常跳转
            next();
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router

        })
    </script>
</body>

</html>